<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路径规划系统</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#64748b',
            accent: '#0ea5e9',
            success: '#22c55e',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
            'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
          }
        }
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .transition-all-300 {
        transition: all 300ms ease-in-out;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .map-container {
        background-color: #f0f4f8;
        background-image: 
          linear-gradient(to right, rgba(100, 116, 139, 0.1) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .control-panel-collapsed {
        width: 4rem;
      }
      .control-panel-expanded {
        width: 18rem;
      }
      .panel-transition {
        transition: width 0.3s ease-in-out;
      }
      .toggle-icon-transition {
        transition: transform 0.3s ease-in-out;
      }
      .rotate-icon {
        transform: rotate(180deg);
      }
      .path-point {
        transition: all 0.2s ease;
      }
      .path-point:hover {
        transform: scale(1.2);
      }
      .path-line {
        transition: stroke-dashoffset 1s ease;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans antialiased text-gray-900">
  <div class="flex h-screen overflow-hidden">
    <!-- 侧边控制面板 -->
    <aside id="controlPanel" class="bg-white shadow-md panel-transition control-panel-expanded flex flex-col">
      <!-- 控制面板标题 -->
      <div class="p-4 border-b border-gray-200 flex items-center justify-between">
        <h1 class="text-lg font-semibold text-primary hidden md:block">路径规划系统</h1>
        <button id="togglePanel" class="text-gray-500 hover:text-primary focus:outline-none toggle-icon-transition">
          <i class="fa fa-chevron-left"></i>
        </button>
      </div>
      
      <!-- 控制面板内容 -->
      <div id="panelContent" class="flex-1 overflow-y-auto scrollbar-hide">
        <!-- 路径规划控制 -->
        <div class="p-4 border-b border-gray-200">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-md font-medium text-gray-700 hidden md:block">路径规划</h2>
            <span class="bg-primary text-white text-xs px-2 py-1 rounded-full">A*</span>
          </div>
          
          <!-- 起点和终点设置 -->
          <div class="space-y-3 mb-4">
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
              <input type="text" placeholder="起点" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary hidden md:block">
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
              <input type="text" placeholder="终点" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary hidden md:block">
            </div>
          </div>
          
          <!-- 算法选择 -->
          <div class="mb-4 hidden md:block">
            <label class="block text-xs font-medium text-gray-500 mb-1">算法选择</label>
            <select class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
              <option value="a-star">A* 算法</option>
              <option value="dijkstra">Dijkstra 算法</option>
              <option value="bfs">广度优先搜索</option>
              <option value="dfs">深度优先搜索</option>
            </select>
          </div>
          
          <!-- 路径参数 -->
          <div class="space-y-3 mb-4 hidden md:block">
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">路径权重</label>
              <input type="range" min="1" max="10" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
            </div>
            <div>
              <label class="block text-xs font-medium text-gray-500 mb-1">障碍物密度</label>
              <input type="range" min="0" max="100" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="flex space-x-2">
            <button id="findPathBtn" class="flex-1 bg-primary hover:bg-blue-600 text-white py-2 px-4 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
              <i class="fa fa-search mr-2"></i>
              <span class="hidden md:inline">规划路径</span>
            </button>
            <button id="clearPathBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
              <i class="fa fa-trash"></i>
              <span class="hidden md:inline ml-1">清除</span>
            </button>
          </div>
        </div>
        
        <!-- 地图控制 -->
        <div class="p-4 border-b border-gray-200">
          <h2 class="text-md font-medium text-gray-700 mb-4 hidden md:block">地图控制</h2>
          
          <div class="grid grid-cols-2 gap-2">
            <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
              <i class="fa fa-plus mr-2"></i>
              <span class="hidden md:inline">放大</span>
            </button>
            <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
              <i class="fa fa-minus mr-2"></i>
              <span class="hidden md:inline">缩小</span>
            </button>
            <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
              <i class="fa fa-arrows mr-2"></i>
              <span class="hidden md:inline">平移</span>
            </button>
            <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
              <i class="fa fa-home mr-2"></i>
              <span class="hidden md:inline">重置</span>
            </button>
          </div>
        </div>
        
        <!-- 路径信息 -->
        <div class="p-4 border-b border-gray-200">
          <h2 class="text-md font-medium text-gray-700 mb-4 hidden md:block">路径信息</h2>
          
          <div class="space-y-3">
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-500 hidden md:inline">路径长度:</span>
              <span class="text-sm font-medium">24.5 km</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-500 hidden md:inline">预计时间:</span>
              <span class="text-sm font-medium">32 分钟</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-500 hidden md:inline">节点数量:</span>
              <span class="text-sm font-medium">18</span>
            </div>
          </div>
          
          <!-- 路径统计图表 -->
          <div class="mt-4 hidden md:block">
            <canvas id="pathChart" height="120"></canvas>
          </div>
        </div>
      </div>
      
      <!-- 控制面板底部 -->
      <div class="p-4 border-t border-gray-200">
        <button class="w-full bg-secondary hover:bg-gray-600 text-white py-2 px-4 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
          <i class="fa fa-cog mr-2"></i>
          <span class="hidden md:inline">设置</span>
        </button>
      </div>
    </aside>
    
    <!-- 主地图区域 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-sm p-4 flex items-center justify-between">
        <div class="flex items-center">
          <button id="mobileMenuBtn" class="mr-4 text-gray-500 hover:text-primary focus:outline-none md:hidden">
            <i class="fa fa-bars"></i>
          </button>
          <h1 class="text-xl font-semibold text-gray-800">路径规划系统</h1>
        </div>
        
        <div class="flex items-center space-x-4">
          <div class="relative">
            <input type="text" placeholder="搜索位置..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
            <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
          </div>
          
          <button class="bg-primary hover:bg-blue-600 text-white py-2 px-4 rounded-md text-sm font-medium transition-all-300 flex items-center">
            <i class="fa fa-location-arrow mr-2"></i>
            我的位置
          </button>
        </div>
      </header>
      
      <!-- 地图容器 -->
      <div id="mapContainer" class="flex-1 map-container relative overflow-hidden">
        <!-- 地图内容将通过JavaScript动态生成 -->
        <svg id="mapSvg" class="w-full h-full"></svg>
        
        <!-- 地图缩放控件 -->
        <div class="absolute bottom-4 right-4 bg-white rounded-md shadow-card overflow-hidden">
          <button class="w-10 h-10 flex items-center justify-center text-gray-700 hover:bg-gray-100 focus:outline-none">
            <i class="fa fa-plus"></i>
          </button>
          <div class="border-t border-gray-200"></div>
          <button class="w-10 h-10 flex items-center justify-center text-gray-700 hover:bg-gray-100 focus:outline-none">
            <i class="fa fa-minus"></i>
          </button>
        </div>
        
        <!-- 路径信息浮动卡片 -->
        <div class="absolute top-4 right-4 bg-white rounded-md shadow-card p-4 w-64">
          <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-medium text-gray-700">当前路径</h3>
            <button class="text-gray-400 hover:text-gray-600 focus:outline-none">
              <i class="fa fa-times"></i>
            </button>
          </div>
          
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-500">总距离:</span>
              <span class="font-medium">24.5 km</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">预计时间:</span>
              <span class="font-medium">32 分钟</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">路径类型:</span>
              <span class="font-medium">最快路线</span>
            </div>
          </div>
          
          <div class="mt-3 pt-3 border-t border-gray-100">
            <button class="w-full bg-primary hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium transition-all-300">
              开始导航
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
  
  <!-- 移动端控制面板 (默认隐藏) -->
  <div id="mobilePanel" class="fixed inset-0 bg-white z-50 transform translate-x-full transition-transform duration-300 ease-in-out md:hidden">
    <div class="p-4 border-b border-gray-200 flex items-center justify-between">
      <h2 class="text-lg font-semibold text-primary">路径规划系统</h2>
      <button id="closeMobilePanel" class="text-gray-500 hover:text-primary focus:outline-none">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <!-- 移动端控制面板内容 -->
    <div class="p-4">
      <!-- 路径规划控制 (移动端) -->
      <div class="mb-6">
        <h3 class="text-md font-medium text-gray-700 mb-4">路径规划</h3>
        
        <!-- 起点和终点设置 -->
        <div class="space-y-3 mb-4">
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
            <input type="text" placeholder="起点" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
            <input type="text" placeholder="终点" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
          </div>
        </div>
        
        <!-- 算法选择 -->
        <div class="mb-4">
          <label class="block text-xs font-medium text-gray-500 mb-1">算法选择</label>
          <select class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
            <option value="a-star">A* 算法</option>
            <option value="dijkstra">Dijkstra 算法</option>
            <option value="bfs">广度优先搜索</option>
            <option value="dfs">深度优先搜索</option>
          </select>
        </div>
        
        <!-- 路径参数 -->
        <div class="space-y-3 mb-4">
          <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">路径权重</label>
            <input type="range" min="1" max="10" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
          </div>
          <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">障碍物密度</label>
            <input type="range" min="0" max="100" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="flex space-x-2">
          <button class="flex-1 bg-primary hover:bg-blue-600 text-white py-2 px-4 rounded-md text-sm font-medium transition-all-300">
            规划路径
          </button>
          <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300">
            清除
          </button>
        </div>
      </div>
      
      <!-- 地图控制 (移动端) -->
      <div class="mb-6">
        <h3 class="text-md font-medium text-gray-700 mb-4">地图控制</h3>
        
        <div class="grid grid-cols-2 gap-2">
          <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
            <i class="fa fa-plus mr-2"></i>
            放大
          </button>
          <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
            <i class="fa fa-minus mr-2"></i>
            缩小
          </button>
          <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
            <i class="fa fa-arrows mr-2"></i>
            平移
          </button>
          <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-md text-sm font-medium transition-all-300 flex items-center justify-center">
            <i class="fa fa-home mr-2"></i>
            重置
          </button>
        </div>
      </div>
      
      <!-- 路径信息 (移动端) -->
      <div>
        <h3 class="text-md font-medium text-gray-700 mb-4">路径信息</h3>
        
        <div class="space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-500">路径长度:</span>
            <span class="text-sm font-medium">24.5 km</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-500">预计时间:</span>
            <span class="text-sm font-medium">32 分钟</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-500">节点数量:</span>
            <span class="text-sm font-medium">18</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
      // 控制面板折叠/展开功能
      const controlPanel = document.getElementById('controlPanel');
      const togglePanel = document.getElementById('togglePanel');
      const panelContent = document.getElementById('panelContent');
      
      togglePanel.addEventListener('click', function() {
        if (controlPanel.classList.contains('control-panel-expanded')) {
          controlPanel.classList.remove('control-panel-expanded');
          controlPanel.classList.add('control-panel-collapsed');
          togglePanel.classList.add('rotate-icon');
        } else {
          controlPanel.classList.remove('control-panel-collapsed');
          controlPanel.classList.add('control-panel-expanded');
          togglePanel.classList.remove('rotate-icon');
        }
      });
      
      // 移动端菜单控制
      const mobileMenuBtn = document.getElementById('mobileMenuBtn');
      const mobilePanel = document.getElementById('mobilePanel');
      const closeMobilePanel = document.getElementById('closeMobilePanel');
      
      mobileMenuBtn.addEventListener('click', function() {
        mobilePanel.classList.remove('translate-x-full');
      });
      
      closeMobilePanel.addEventListener('click', function() {
        mobilePanel.classList.add('translate-x-full');
      });
      
      // 初始化地图
      initMap();
      
      // 初始化路径统计图表
      initPathChart();
      
      // 绑定路径规划按钮事件
      document.getElementById('findPathBtn').addEventListener('click', findPath);
      
      // 绑定清除路径按钮事件
      document.getElementById('clearPathBtn').addEventListener('click', clearPath);
    });
    
    // 初始化地图
    function initMap() {
      const svg = document.getElementById('mapSvg');
      const mapContainer = document.getElementById('mapContainer');
      
      // 设置SVG尺寸
      function setSvgSize() {
        svg.setAttribute('width', mapContainer.clientWidth);
        svg.setAttribute('height', mapContainer.clientHeight);
      }
      
      // 初始设置尺寸
      setSvgSize();
      
      // 窗口大小改变时重新设置尺寸
      window.addEventListener('resize', setSvgSize);
      
      // 生成随机障碍物
      generateObstacles();
      
      // 设置起点和终点
      setStartAndEndPoints();
    }
    
    // 生成随机障碍物
    function generateObstacles() {
      const svg = document.getElementById('mapSvg');
      const width = svg.clientWidth;
      const height = svg.clientHeight;
      const gridSize = 20;
      const obstacleCount = 50;
      
      // 清除现有障碍物
      const existingObstacles = svg.querySelectorAll('.obstacle');
      existingObstacles.forEach(obstacle => obstacle.remove());
      
      // 生成新的障碍物
      for (let i = 0; i < obstacleCount; i++) {
        const x = Math.floor(Math.random() * (width / gridSize)) * gridSize;
        const y = Math.floor(Math.random() * (height / gridSize)) * gridSize;
        
        // 确保障碍物不会覆盖起点或终点
        if ((x === 40 && y === 40) || (x === width - 60 && y === height - 60)) {
          continue;
        }
        
        const obstacle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        obstacle.setAttribute('x', x);
        obstacle.setAttribute('y', y);
        obstacle.setAttribute('width', gridSize);
        obstacle.setAttribute('height', gridSize);
        obstacle.setAttribute('fill', '#94a3b8');
        obstacle.setAttribute('class', 'obstacle');
        svg.appendChild(obstacle);
      }
    }
    
    // 设置起点和终点
    function setStartAndEndPoints() {
      const svg = document.getElementById('mapSvg');
      const width = svg.clientWidth;
      const height = svg.clientHeight;
      
      // 清除现有起点和终点
      const existingStart = svg.querySelector('.start-point');
      const existingEnd = svg.querySelector('.end-point');
      
      if (existingStart) existingStart.remove();
      if (existingEnd) existingEnd.remove();
      
      // 创建起点
      const startPoint = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      startPoint.setAttribute('cx', 50);
      startPoint.setAttribute('cy', 50);
      startPoint.setAttribute('r', 8);
      startPoint.setAttribute('fill', '#22c55e');
      startPoint.setAttribute('class', 'start-point path-point');
      svg.appendChild(startPoint);
      
      // 创建终点
      const endPoint = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      endPoint.setAttribute('cx', width - 50);
      endPoint.setAttribute('cy', height - 50);
      endPoint.setAttribute('r', 8);
      endPoint.setAttribute('fill', '#ef4444');
      endPoint.setAttribute('class', 'end-point path-point');
      svg.appendChild(endPoint);
    }
    
    // 初始化路径统计图表
    function initPathChart() {
      const ctx = document.getElementById('pathChart');
      
      if (!ctx) return;
      
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          datasets: [{
            label: '路径成本',
            data: [12, 19, 15, 17, 22, 24, 20, 18, 25, 30],
            borderColor: '#3b82f6',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            tension: 0.4,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              mode: 'index',
              intersect: false
            }
          },
          scales: {
            x: {
              display: false
            },
            y: {
              display: false,
              min: 0
            }
          }
        }
      });
    }
    
    // 规划路径
    function findPath() {
      // 清除现有路径
      clearPath();
      
      const svg = document.getElementById('mapSvg');
      const width = svg.clientWidth;
      const height = svg.clientHeight;
      
      // 创建路径
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      
      // 生成随机路径点 (实际应用中应该使用路径规划算法)
      const points = generateRandomPathPoints(50, 50, width - 50, height - 50, 15);
      
      // 创建路径字符串
      let pathStr = `M ${points[0].x} ${points[0].y}`;
      for (let i = 1; i < points.length; i++) {
        pathStr += ` L ${points[i].x} ${points[i].y}`;
      }
      
      // 设置路径属性
      path.setAttribute('d', pathStr);
      path.setAttribute('stroke', '#3b82f6');
      path.setAttribute('stroke-width', 4);
      path.setAttribute('fill', 'none');
      path.setAttribute('stroke-linecap', 'round');
      path.setAttribute('stroke-linejoin', 'round');
      path.setAttribute('class', 'path-line');
      
      // 添加路径到SVG
      svg.appendChild(path);
      
      // 添加路径动画
      animatePath(path);
      
      // 更新路径信息
      updatePathInfo(points);
    }
    
    // 生成随机路径点
    function generateRandomPathPoints(startX, startY, endX, endY, pointCount) {
      const points = [];
      points.push({ x: startX, y: startY });
      
      // 生成中间点
      for (let i = 1; i < pointCount - 1; i++) {
        const progress = i / (pointCount - 1);
        const x = startX + (endX - startX) * progress + (Math.random() - 0.5) * 100;
        const y = startY + (endY - startY) * progress + (Math.random() - 0.5) * 100;
        
        points.push({ x, y });
      }
      
      points.push({ x: endX, y: endY });
      return points;
    }
    
    // 路径动画
    function animatePath(path) {
      const pathLength = path.getTotalLength();
      
      // 设置初始状态
      path.style.strokeDasharray = pathLength;
      path.style.strokeDashoffset = pathLength;
      
      // 动画
      setTimeout(() => {
        path.style.strokeDashoffset = 0;
      }, 100);
    }
    
    // 更新路径信息
    function updatePathInfo(points) {
      // 计算路径长度 (简化计算)
      let length = 0;
      for (let i = 0; i < points.length - 1; i++) {
        const dx = points[i+1].x - points[i].x;
        const dy = points[i+1].y - points[i].y;
        length += Math.sqrt(dx * dx + dy * dy);
      }
      
      // 转换为公里 (假设1像素 = 10米)
      const kmLength = (length / 100).toFixed(1);
      
      // 计算预计时间 (假设平均速度为45km/h)
      const hours = kmLength / 45;
      const minutes = Math.round(hours * 60);
      
      // 更新UI
      const pathInfoElements = document.querySelectorAll('.text-sm.font-medium');
      if (pathInfoElements.length >= 3) {
        pathInfoElements[0].textContent = `${kmLength} km`;
        pathInfoElements[1].textContent = `${minutes} 分钟`;
        pathInfoElements[2].textContent = points.length.toString();
      }
      
      // 更新浮动卡片
      const floatCardElements = document.querySelectorAll('.absolute.top-4.right-4 .font-medium');
      if (floatCardElements.length >= 2) {
        floatCardElements[0].textContent = `${kmLength} km`;
        floatCardElements[1].textContent = `${minutes} 分钟`;
      }
    }
    
    // 清除路径
    function clearPath() {
      const svg = document.getElementById('mapSvg');
      const path = svg.querySelector('.path-line');
      
      if (path) {
        path.remove();
      }
    }
  </script>
</body>
</html>
